<template>
    <div id="box">
        <el-card>
            <template v-slot:header>
                <h1>{{ title }}</h1>
            </template>

            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                style="width: 60%;"
                size="mini"
            >
                <el-form-item label="选择日期" prop="date">
                    <el-date-picker type="month" v-model="ruleForm.date" style="width: 200px"></el-date-picker>
                </el-form-item>
                <el-form-item prop="salary">
                    <span slot="label" style="color: #dc4e4e;font-weight: 700">
                        当月薪资
                    </span>
                    <el-input v-model="ruleForm.salary" placeholder="输入薪资" type="number" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="子女教育金" prop="children">
                    <el-input v-model="ruleForm.children" placeholder="不小于500" type="number" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="租房租金" prop="rent">
                    <el-input v-model="ruleForm.rent" placeholder="不小于500" type="number" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="赡养老人" prop="provide">
                    <el-input v-model="ruleForm.provide" placeholder="不小于500" type="number" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="继续教育" prop="continue">
                    <el-input v-model="ruleForm.continue" placeholder="不小于500" type="number" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="社保" prop="socialSecurity">
                    <el-input v-model="ruleForm.socialSecurity" type="number" placeholder="默认为1000" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="公积金" prop="accumulationFund">
                    <el-input v-model="ruleForm.accumulationFund" type="number" placeholder="默认为1500" style="width: 200px"></el-input>
                </el-form-item>

            </el-form>

            <div class="footer">
                <el-button size="mini" @click="$router.back()">取消</el-button>
                <el-button size="mini" type="primary" @click="submitForm('ruleForm')">添加</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        var startNum = (rule, value, callback) => {
            if (value.length > 4) {
                callback(new Error('起征点过大'))
            } else {

                callback()
            }
        };
        var accumulationFund = (rule, value, callback) => {
            if (Number(value) < 1500) {
                callback(new Error('不可小于默认值'))
            } else {

                callback()
            }
        };
        var socialSecurity = (rule, value, callback) => {
            if (Number(value) < 1000) {
                callback(new Error('不可小于默认值'))
            } else {

                callback()
            }
        };
        return {
            flag: false,
            title: '',
            types: [
                '工资薪金所得税',
                '劳务报酬所得税',
                '不计税'
            ],
            ruleForm: {
                date: '',
                children: '', //子女教育
                rent: '',// 租房租金
                provide: '', // 赡养老人
                continue: "", // 培养自己
                salary: '', // 当月薪资
                socialSecurity: 1000, // 社保有默认值，可以不填
                accumulationFund: 1500 // 公积金有默认值, 可以不填
            },
            rules: {
                date: [
                    {required: true, message: '请选择日期', trigger: 'blur'},
                ],
                children: [
                    {required: true, message: '请输入子女教育金', trigger: 'blur'},
                    {validator: startNum, trigger: 'change'}
                ],
                rent: [
                    {required: true, message: '请输入租房租金', trigger: 'blur'},
                    {validator: startNum, trigger: 'change'}
                ],
                provide: [
                    {required: true, message: '请输入赡养老人金', trigger: 'blur'},
                    {validator: startNum, trigger: 'change'}
                ],
                continue: [
                    {required: true, message: '请输入继续教育金', trigger: 'blur'},
                    {validator: startNum, trigger: 'change'}
                ],
                socialSecurity: [
                    {required: false, validator: socialSecurity, trigger: 'change'}
                ],
                accumulationFund: [
                    {required: false, validator: accumulationFund, trigger: 'change'}

                ],
                salary: [
                    {required: true, message: '请输入当月薪资', trigger: 'blur'},
                ],
            }
        };
    },
    mounted() {

    },
    watch: {},
    methods: {
        submitForm(formName) {
            //     false为修改
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    await this.$axios.post('tax/staffAdd', {
                        ...this.ruleForm, id: this.$route.query.id
                    })

                    this.$message.success("添加成功")
                    this.$router.back()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        }

    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
}
</script>

<style lang="scss" scoped>
#box {
    height: 100%;

    .el-card {
        height: 100%;
        position: relative;
        overflow: hidden;

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            border-top: 1px #f0f0f0 solid;
            padding: 20px;
        }
    }

}
</style>
